<link rel="stylesheet" href="__CDN__/assets/addons/sum/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/sum/libs/common.css">
<style>
    #detailPage {
        border-radius: 10px;
        color: #444;
        font-weight: 500;
        padding: 0px 10px 60px;
        position: relative;
    }

    .el-form-item__label,
    .el-form-item__content {
        line-height: 32px;
    }

    .el-form-item {
        margin-bottom: 14px;
        /* padding-left: 50px; */
    }

    .title-tip {
        color: #999;
        line-height: 12px;
        font-size: 12px;
        font-weight: 400;
        margin-top: 10px;
    }

    .commission-rate,
    .level-name {
        width: 200px;
    }

    .upgrade-condition-item {
        display: inline-block;
        margin-bottom: 10px;
        padding: 0 10px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border: 1px solid #e5e5e5;
        border-radius: 6px;
        margin-right: 14px;
        cursor: pointer;
        font-size: 12px;
        position: relative;
        overflow: hidden;
    }

    .upgrade-type-container {
        margin-bottom: 20px;
    }

    .upgrade-type-title {
        margin-right: 20px;
    }

    .upgrade-condition-item-active {
        border-color: #7438D5;
        color: #7438D5;
    }

    .condition-delete {
        margin-left: 20px;
        cursor: pointer;
        display: inline-block;
        color: #FE7C76;
        font-size: 20px;
    }

    .goods-header {
        background: #f9f9f9;
        height: 40px;
        line-height: 40px;
    }

    .goods-item-1 {
        width: 280px;
        padding: 0 20px;
    }

    .goods-item-2 {
        width: 100px;
        padding: 0 20px;
    }

    .goods-item-3 {
        width: 100px;
    }

    .goods-delete {
        cursor: pointer;
        color: #FF5959;
    }

    .goods-image {
        width: 40px;
        height: 40px;
        margin-right: 20px;
        border: 1px solid #e6e6e6;
    }

    .goods-add {
        width: 80px;
        height: 30px;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
        background: #7438D5;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .el-image {
        width: 100%;
        height: 100%;
    }

    .image-slot {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .shopro-submit-container {
        display: flex;
        justify-content: flex-end;
        position: fixed;
        right: 40px;
        bottom: 0px;
        height: 60px;
    }

    .sum-submit-button {
        width: 88px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background: #7438D5;
        font-size: 14px;
        color: #fff;
        cursor: pointer;
        border-radius: 5px;
    }

    .goods-title,
    .goods-price {
        line-height: 13px;
    }

    .goods-price {
        color: #7438D5;
    }

    .goods-title {
        margin-bottom: 13px;
    }

    .goods-body-item {
        border-top: 1px solid #e6e6e6;
        height: 50px;
        line-height: 50px;
    }

    .active-icon {
        width: 22px;
        height: 22px;
        position: absolute;
        right: -1px;
        top: -1px;
    }

    .sum-level-item {
        width: 70px;
        height: 32px;
        line-height: 32px;
        border-radius: 4px;
        border: 1px solid #e6e6e6;
        margin-right: 12px;
        text-align: center;
        font-size: 13px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        margin-bottom: 10px;
    }

    .sum-level-item-active {
        border-color: #7438D5;
        color: #7438D5;
    }

    .sum-level-item-disable {
        background: #eee;
        border-color: #e6e6e6;
        cursor: auto;
    }

    .el-dialog__body {
        padding: 10px 20px;
    }

    .el-dialog__footer {
        padding: 0;
    }

    .bgimage-add-container {
        border: 1px solid #e6e6e6;
        width: 80px;
        height: 80px;
        border-radius: 5px;
    }

    .bgimage-add {
        width: 80px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        color: #999;
    }

    .sum-goods-add-button {
        cursor: pointer;
        color: #7438D5;
        font-size: 13px;
        height: 50px;
        line-height: 50px;
        padding: 0 20px;
    }

    .sum-goods-add-button i {
        margin-right: 6px;
    }

    .child-agent-count-add {
        width: 80px;
        height: 32px;
        background: #FFFFFF;
        border: 1px solid #7438D5;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #7438D5;
        margin-bottom: 14px;
        cursor: pointer;
    }

    .child-agent-count-add i {
        margin-right: 6px;
    }

    .child-agent-count-item {
        margin-bottom: 14px;
    }

    .child-agent-count-select {
        width: 150px;
    }

    .child-agent-count-man {
        margin-left: 30px;
    }

    .child-agent-count-input {
        width: 90px;
        margin-left: 20px;
    }

    .level-tip {
        margin-bottom: 20px;
        border-radius: 5px;
        background-color: #F1EBFA;
        padding: 16px;
    }
    .el-input-group__append{
        line-height: 30px;
        padding: 0 20px;
    }

    [v-cloak] {
        display: none
    }
</style>
<style>
    .el-select .el-input {
        width: 100px;
    }
    .input-with-select .el-input-group__append {
        margin: 4px;
        background-color: #fff;
    }
</style>
<script src="__CDN__/assets/addons/sum/libs/vue.js"></script>
<script src="__CDN__/assets/addons/sum/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/sum/libs/moment.js"></script>

<div id="detailPage" v-cloak>

    <el-form :model="formData" ref="formData" :rules="rulesAdd" label-width="168px" v-if="formData">
        <div>
            <div class="sum-form-group-title">
                <div class="sum-form-group-title-line"></div>基础资料
            </div>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="用户账号电话：" prop="user_phone">
                        <el-input v-model="formData.user_phone" placeholder="请输入用户账号电话" size="medium"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="用户姓名：" prop="user_name">
                        <el-input v-model="formData.user_name" placeholder="请输入用户姓名" size="medium"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="加油票订单号：" prop="order_sn">
                        <el-input v-model="formData.order_sn" placeholder="请输入加油票订单号" size="medium" >
                            <el-button slot="append" icon="el-icon-search" @click="cheakOrderSn"></el-button>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="加油站名：" prop="store_name">
                        <el-input v-model="formData.store_name" placeholder="请输入加油站名"  size="medium" ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="sum-form-group-title">
                <div class="sum-form-group-title-line"></div>登记信息
            </div>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="信息来源：" prop="">
                        <el-input v-model="formData.oper_name" placeholder="填人名" size="medium" >
                            <el-select v-model="formData.work_type" slot="append" placeholder="请选择" @change="changeWorkType">
                                <el-option v-for="item in workTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="登记时间：" prop="visittime">
                        <el-date-picker
                                v-model="formData.visittime"
                                type="datetime"
                                placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="登记结果：" prop="content">
                        <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="formData.content">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <div class="sum-form-group-title">
                <div class="sum-form-group-title-line"></div>其他信息
            </div>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="协助部门处理：" prop="need_departments">
                        <template>
                            <el-checkbox-group v-model="formData.need_departments_arr" @change="changeNeedDepartment">
                                <el-checkbox v-for="item in needDepartmentOptions" :key="item.value" :label="item.value">{{item.label}}</el-checkbox>
                            </el-checkbox-group>
                        </template>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="回复时间：" prop="huifu_hour">
                        <template>
                            <el-radio v-model="formData.huifu_hour" v-for="item in huifuHourOptions" :key="item.value" :label="item.value">{{item.label}}</el-radio>
                        </template>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="工单状态：" prop="status">
                        <el-switch
                                v-model="formData.status"
                                active-value="1" inactive-value="0"
                                active-text="已处理"
                                inactive-text="待处理"
                        >
                        </el-switch>
                    </el-form-item>
                </el-col>
            </el-row>
        </div>

    </el-form>

    <div class="sum-submit-container">
        <div class="sum-submit-button" @click="formSubmit('formData')">确定</div>
    </div>
</div>